<template>
  <div class="list-content-hook">
    <div class="content-card border-bottom" v-for="(item, index) in productList" :key="index">
      <div class="card-top">
        <div class="card-img" v-show="!item.defaultImgShow">
          <img class="img" :src="item.creditcardImg"  @error="imgError(index)"/>
        </div>
        <default-img class="card-img" v-show="item.defaultImgShow"></default-img>
        <div class="card-desc">
          <div class="title">{{item.creditcardName}}</div>
          <ul class="desc">
            <li v-for="i in item.productRights">{{i}}</li>
          </ul>
        </div>
      </div>
      <div class="card-btn-list">
        <div class="spe-list">
          <span v-for="i in item.creditcardTrait">{{i}}</span>
        </div>
        <div class="apply-btn" @click="applyClick(item)">
          立即申请
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import DefaultImg from '@/components/defaultImg'
  export default{
    name: 'CreditCard',
    props: {
      productList: {
        type: Array,
        default: []
      }
    },
    data(){
        return {
          defaultImg:false,
          currentIdx:-1
        }
    },
    components:{
      DefaultImg
    },
    methods:{
      applyClick(item){
//        if(!this.token){
//          this.$router.push('/login')
//          return
//        }
        this.$router.push({
          name: 'creditcardDetail',
          query: {
            id: item.id,
            name:item.creditcardName
          }
        })
      },
      imgError(index){
        this.$set(this.productList[index],'defaultImgShow',true);
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  @import '~style/mixins.styl'
  .list-content-hook
    padding :0
    .content-card
      padding: .3rem .24rem
      display flex
      flex-direction column
      .card-top
        display flex
        align-items flex-start
        .card-img
          width 36.13%
          padding-bottom  20.2%
          height 0
          overflow: hidden;
          flex none
          .img
            height: 19.2vw;
            width: 100%;
        .card-desc
          display flex
          flex-direction column
          margin-left .4rem
          padding-right .4rem
          .title
            font-size .32rem
            color $darkTextColor
            font-weight bold
          .desc
            width 100%
            list-style decimal
            font-size .26rem
            margin .16rem 0 0 .3rem
            color $disabledText
            li
              line-height .4rem

      .card-btn-list
        display flex
        justify-content space-between
        align-items center
        margin-top .3rem
        .apply-btn
          background :linear-gradient(to right, $gradientDeep , $gradientTint)
          width 2.42rem
          height .56rem
          line-height .56rem
          text-align center
          color white
          border-radius 10rem
        .spe-list
          color $titleColor
          font-size .24rem
          span + span
            margin-left .1rem
</style>
